<template>
  <section>
    <el-row>
      <el-col :span="24">
        <!--表单-->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="platformValue" placeholder="请输入用户名" style="width: 300px;"></el-input>
          </el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-left:10px">查询</el-button>
        </el-form>
        <!--表格-->
        <el-table
          :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
          border
          style="width: 100%">
          <el-table-column
            prop="username"
            label="用户名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="昵称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="avatar"
            label="头像"
            width="180">
          </el-table-column>
          <el-table-column
            prop="registerType"
            label="注册方式"
            width="90" :formatter="formatRegisterType">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="注册时间"
            width="180" :formatter="formatCreateTime">
          </el-table-column>
          <el-table-column label="">
            <template scope="scope">
              <el-button type="primary" size="small" @click="handleDetail(scope.$index, scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </section>
</template>
<script type="text/ecmascript-6">
import debounce from 'lodash.debounce';
import { mobileUserService } from '@/services';
import utils from '@/utils.js';
export default {
  data () {
    return {
      tableData: [],
      platformValue: '',
      currentPage: 1,
    };
  },
  activated () {
    this.platformValue = '';
    this.getUserList(this.platformValue);
  },
  methods: {
    getUserList: debounce(async function(username) {
      this.tableData = await mobileUserService.getMobileUserList(username);
    }, 500),
    onSubmit (e) {
      let target = e.target;
      // 根据button组件内容 里面包括一个span标签，如果设置icon，则还包括一个i标签，其他情况请自行观察。
      // 所以，在我们点击到button组件上的文字也就是span标签上时，直接执行e.target.blur()不会生效，所以要加一层判断。
      if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
        target = e.target.parentNode;
      }
      target.blur();
      this.currentPage = 1;
      this.getUserList(this.platformValue);
    },
    handleDetail (index, row) {

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      if (process.env.NODE_ENV !== 'production') {
      // eslint-disable-next-line
        console.log(`当前页: ${val}`);
      }
    },
    formatCreateTime(row, column) {
      return utils.timestampToTime(row.createTime*1000);
    },
    formatRegisterType(row, column) {
      switch (row.registerType) {
        case 0:
          return '邮箱注册';
        default:
          return '手机注册';
      }
    },
  }
};
</script>
<style>
  .el-pagination {
    text-align: center;
    margin-top: 30px;
  }
  .el-message-box__btns .cancel {
    float: right;
    margin-left: 10px;
  }
</style>